<template>
  <base-page-view class-name="inventory-transform">
    <template v-if="pageLoaded">
      <template v-if="exchange_target_list.length">
        <!-- 头部 -->
        <view class="header">
          <view>提示：您可以将云仓箱起的库存按比例转换为其他云仓箱起，并用于提货。</view>
          <view>示例：1箱云仓箱起按比例可替换4提纸巾箱起。则替换后云仓库存扣减1，纸巾库存增加4。</view>
        </view>

        <!-- 待转换 -->
        <view class="box goods-item">
          <b-image class-name="img" :src="box_series.img" mode="aspectFill" />
          <view class="sub-item">
            <view class="name">{{ box_series.series_name }}</view>
            <view class="footer">
              <view class="inventory">库存 {{ box_series.stock_number }}</view>
              <view>
                <base-stepper :value.sync="formData.exchange_num" :min="minTransform" :max="maxTransform" :step="exchange_target_list[selectIndex].from_number" :size="34" :border-radius="4" @change="changeNum"></base-stepper>
              </view>
            </view>
          </view>
        </view>

        <!-- 可转换 -->
        <view class="box-transform">
          <view class="title">请选择要转换的箱起商品（单选）</view>
          <view class="content">
            <view v-for="(item, index) in exchange_target_list" :key="item.series_id" class="goods-item" @click="setSelect(index)">
              <view class="icon-select">
                <image v-if="index === selectIndex" src="/static/images/icon/icon_radio_active.png" mode="aspectFit" />
                <image v-else src="/static/images/icon/icon_radio.png" mode="aspectFit" />
              </view>
              <b-image class-name="img" :src="item.img" mode="aspectFill" />
              <view class="sub-item">
                <view class="name">{{ item.series_name }}</view>
                <view class="footer">
                  <view class="price">￥{{ item.price | formatMoney }}/{{ item.stock_unit }}</view>
                  <view class="percent">转换比例 {{ item.exchange_rate }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 底部 -->
        <footer-bar>
          <view class="footer-content">
            <view class="line-data">
              <view class="left">合计：{{ selectName }}</view>
              <view><text>{{ transformCount }}</text>{{ selectUnit }}</view>
            </view>
            <view v-if="formData.exchange_num <= box_series.stock_number" class="btn" @click="transform">确认</view>
            <view v-else class="btn disabled">库存不足无法转换</view>
          </view>
        </footer-bar>
      </template>
      <view v-else class="empty-content">
        <msg-page type="empty_list" text="暂无可兑换的云仓活动" btn-text="返回" @btnClick="btnClick"></msg-page>
      </view>
    </template>
  </base-page-view>
</template>
<script>
import baseStepper from '@/components/base/base-stepper.vue'
import footerBar from '@/components/footerBar/index.vue'
import msgPage from '@/components/msgPage/index.vue'
import { debounce } from '@/utils/tools'
import './transform.scss'
export default {
  name: 'InventoryTransform',
  components: {
    baseStepper,
    footerBar,
    msgPage
  },
  data() {
    return {
      pageLoaded: false,
      series_id: '',
      box_series: {},
      exchange_target_list: [],
      selectIndex: 0,
      selectName: '',
      selectUnit: '',

      formData: {
        exchange_num: 1,
        from_series_id: '',
        to_series_id: '',
        user_id: ''
      }
    }
  },
  computed: {
    transformCount: function() {
      if (this.exchange_target_list.length) {
        return (this.formData.exchange_num / this.exchange_target_list[this.selectIndex].from_number) * this.exchange_target_list[this.selectIndex].to_number
      }
      return 0
    },
    minTransform: function() {
      if (this.exchange_target_list.length) {
        return this.exchange_target_list[this.selectIndex].from_number
      }
      return 1
    },
    maxTransform: function() {
      if (this.exchange_target_list.length) {
        return Math.floor(this.box_series.stock_number / this.exchange_target_list[this.selectIndex].from_number) * this.exchange_target_list[this.selectIndex].from_number
      }
      return 99999
    }
  },
  onLoad(options) {
    this.series_id = options.series_id || ''
    // this.box_unit_type = options.box_unit_type || 1
    this.formData.from_series_id = this.series_id
    this.formData.user_id = this.userInfo ? this.userInfo.uid : ''
    if (this.series_id) {
      this.fetchData()
    } else {
      uni.showToast({ title: '未获取到箱起数据', icon: 'none' })
    }
  },
  methods: {
    // 获取可兑换箱起列表
    async fetchData() {
      const res = await this.$api.boxApi.queryStockTransform({
        series_id: this.series_id
      })
      if (res.success && res.data) {
        const { box_series_v_o, exchange_target_list } = res.data
        this.box_series = box_series_v_o || {}
        this.exchange_target_list = exchange_target_list || []
        this.setSelect(0)
      }
      this.pageLoaded = true
    },

    // 更换兑换箱起商品
    setSelect(index) {
      this.selectIndex = index
      if (this.exchange_target_list[index]) {
        this.selectName = this.exchange_target_list[index].series_name
        this.selectUnit = this.exchange_target_list[index].stock_unit
        this.formData.to_series_id = this.exchange_target_list[index].series_id
        this.formData.exchange_num = this.exchange_target_list[index].from_number
      }
    },

    // 更改兑换库存数量
    changeNum: debounce(function(num) {
      console.log('changeNum', num, 666)
      this.formData.exchange_num = num
      this.$nextTick(() => {
        const r = Math.floor(num / this.exchange_target_list[this.selectIndex].from_number) * this.exchange_target_list[this.selectIndex].from_number
        this.formData.exchange_num = (r < this.minTransform) ? this.minTransform : r
      })
    }, 1500),

    // 点击返回
    btnClick() {
      uni.navigateBack()
    },

    // transform
    transform() {
      this.$gc.$message({
        content: '确认是否要转换?',
        title: '温馨提示',
        showMessage: true,
        confirmText: '确定',
        align: 'center',
        confirm: async() => {
          const res = await this.$api.boxApi.stockTransform(this.formData)
          if (res.success) {
            uni.showToast({ title: '库存转换成功', icon: 'none' })
            setTimeout(() => {
              uni.navigateBack()
            }, 1500)
          }
        }
      })
    }
  }
}
</script>
